<template>
  <div class="Home">
    <Navbar />
    <div class="container">
      <div class="container banner">
        <el-carousel
          direction="vertical"
          :interval="3000"
          :autoplay="true"
          height="520px"
          v-if="$route.path != '/home/search'"
        >
          <el-carousel-item v-for="banner in BannerList" :key="banner.id">
            <img :src="banner.cover" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ElButton } from "element-plus";
import { ref, onMounted } from "vue";
import Navbar from "../components/common/Navbar.vue";
import Male from "../components/common/Male.vue";
import Female from "../components/common/Female.vue";
import { getNav } from "../api/api";
const a = 1;
let BannerList = ref([]);
onMounted(() => {
  getNav().then((res) => {
    BannerList.value = res.data.list[0].banners;
  });
});

let componentName = ref("Male");
</script>

<style></style>
